// Tables
//
// Table layouts.
//
// Styleguide 7.

// Data Table
//
// The only two classes you need to add to get this styling is "table-wrap" to a container that wraps around
// the table element and also the "table-data" class to the table element itself.
//
// Take note of the options cell. This cell generally contains icons and maybe a toggle to perform actions on the row.
// Most of the time, these options should be wrapped in a btn-group div to make sure they don't wrap and align
// themselves to eachother properly. Also, any icon that performs an action should have the title attribute set, so
// the user can hover over it to get a description of what it does.
//
// The default min-width for any column (not including the checkbox column) is 100px. You can specify other min-widths
// using the following classes on th elements in the thead container:
//
// .column-xl       : 300px <br>
// .column-lg       : 210px <br>
// .column-md       : 132px <br>
// .column-sm       : 90px  <br>
// .column-xs       : 54px  <br>
//
// A checkbox column should have the .column-checkbox class on its column header.
//
// The table is made responsive by the jquery plugin Table Jenga, which adds column headings and cell data to meta
// items under the main column. To add Table Jenga functionality to a table, you must add the js-tj class to the table
// element. There are data attributes you can add to columns to make Table Jengo work as you intend:
//
// Set 'data-tj-ignore="true"' on a thead td or thead th element to never collapse that column
// Set 'data-tj-main="true"' on a thead td or thead th element to make that the main column instead of the first column
//
// Markup:
// <div class="table-wrap">
//   <table class="table-data js-tj">
//     <thead>
//       <tr>
//         <th class="column-checkbox" data-tj-ignore="true"></th>
//         <th class="column-lg" data-tj-main="true">Username</th>
//         <th>Roles</th>
//         <th class="column-md">First Visit</th>
//         <th class="column-md">Last Visit</th>
//         <th>Last IP</th>
//         <th class="options column-sm"></th>
//       </tr>
//     </thead>
//     <tbody>
//       <tr>
//         <td><input type="checkbox"></td>
//         <td>
//           <div class="media-sm">
//             <div class="media-left">
//               <div class="media-image-wrap">
//                 <img src="./public/resources/images/smart-puppy.jpg"></a>
//               </div>
//             </div>
//             <div class="media-body">
//               <div class="media-title">
//                 Smart Puppy</a>
//               </div>
//               <div class="info user-email">puppy@email.com</div>
//             </div>
//           </div>
//         </td>
//         <td>Member, Moderator</td>
//         <td>April 2</td>
//         <td>April 26</td>
//         <td>10.0.10.1</td>
//         <td class="options">
//           <div class="btn-group">
//             <a href="#" class="btn btn-icon" aria-label="Edit" title="Edit">
//               <svg class="icon icon-svg-edit" viewBox="0 0 17 17">
//                 <use xlink:href="#edit"></use>
//               </svg>
//             </a>
//             <a href="#" class="btn btn-icon" aria-label="Delete" title="Delete">
//               <svg class="icon icon-svg-delete" viewBox="0 0 17 17">
//                 <use xlink:href="#delete"></use>
//               </svg>
//             </a>
//           </div>
//         </td>
//       </tr>
//       <tr>
//         <td><input type="checkbox"></td>
//         <td>
//           <div class="media-sm">
//             <div class="media-left">
//               <div class="media-image-wrap">
//                 <img src="./public/resources/images/little-chick.jpg"></a>
//               </div>
//             </div>
//             <div class="media-body">
//               <div class="media-title">
//                 Chick</a>
//               </div>
//               <div class="info user-email">chick@email.com</div>
//             </div>
//           </div>
//         </td>
//         <td>Member</td>
//         <td>April 2</td>
//         <td>April 26</td>
//         <td>10.0.10.1</td>
//         <td class="options">
//           <div class="btn-group">
//             <a href="#" class="btn btn-icon" aria-label="Edit" title="Edit">
//               <svg class="icon icon-svg-edit" viewBox="0 0 17 17">
//                 <use xlink:href="#edit"></use>
//               </svg>
//             </a>
//             <a href="#" class="btn btn-icon" aria-label="Delete" title="Delete">
//               <svg class="icon icon-svg-delete" viewBox="0 0 17 17">
//                 <use xlink:href="#delete"></use>
//               </svg>
//             </a>
//           </div>
//         </td>
//       </tr>
//     </tbody>
//   </table>
// </div>
//
// Styleguide 7.1.

.table-wrap {
    display: block;
    margin-top: 0;
    margin-right: (-$padding-row);
    margin-bottom: 0;
    margin-left: (-$padding-row);
}

.table-data {
    margin-bottom: 0;
    @include fixed-table;
    @include has-top-border;

    thead {
        @extend .table-data-head;
    }

    tbody {
        @extend .table-data-body;
    }

    th,
    td {
        @extend .table-data-cell;

        & > *:last-child {
            margin-bottom: 0;
        }
    }

    td.options {
        .btn-group {
            justify-content: flex-end;
        }
    }

    .toggle-wrap {
        margin-left: 12px;
        @extend .toggle-wrap-sm;
    }

    tbody + tbody {
        border-top: ($table-border-width) solid $table-border-color;
    }

    .column-checkbox {
        text-align: center;
        padding-left: 0;
        padding-right: 0;
    }

    .column-center {
        text-align: center;
    }
}

// Add to a table that has content in one or more cells.
.table-data-content {
    tbody {
        td {
            vertical-align: top;
        }
    }

    .media + .post-content,
    .media + .userContent {
        margin-top: $table-padding-y * 2;
    }
}

.table-data-cell {
    overflow: hidden;
    padding: $table-padding-y $table-padding-x;
    line-height: $line-height;
    vertical-align: middle;
    border-bottom: $table-border-width solid $table-border-color;
}

.table-data-body {
    font-size: $font-size-tables;

    tr {
        &:hover {
            $hoverColor: #f9fdfe;
            background-color: #f9fdfe;

            .collapsableContent {
                background-color: $hoverColor;
            }

            .collapsableContent-gradient {
                background: linear-gradient(to bottom, rgba($hoverColor, 0), $hoverColor);
            }
        }
    }
}

.table-data-head {
    // thead
    tr {
        background-color: $grey-light;
    }

    th,
    td {
        width: 100px;
        padding: ($spacer * 0.5) $table-padding-x;

        // 1px offset to account for previous border sizes.
        padding-left: $table-padding-x - 1px;

        border-right: $table-border-width solid #eee;
        border-top: $table-border-width solid #ddd;
        border-bottom: $table-border-width solid $table-border-color;

        text-transform: uppercase;
        font-weight: 600;
        font-size: $font-size-sm;
        line-height: $line-height-lg;

        &:first-child {
            padding-left: $table-padding-x;
        }

        &:last-child {
            border-right: 0;
        }

        &.column-full {
            width: 100%;
        }

        &.column-xl {
            width: 300px;
        }

        &.column-lg {
            width: 210px;
        }

        &.column-md {
            width: 132px;
        }

        &.column-sm {
            width: 90px;
        }

        &.column-xs {
            width: 54px;
        }

        &.column-checkbox {
            width: $spacer + 2 * $table-padding-x;
        }
    }
}

// Table Jenga Meta
//
// Styling for Table Jenga meta (when a table is collapsed on small screen sizes).
//
// Markup:
// <div class="table-meta">
//   <div class="table-meta-item">
//     <span class="table-meta-item-label">Roles: </span>
//     <span class="table-meta-item-data">Member, Moderator</span>
//   </div>
//   <div class="table-meta-item">
//     <span class="table-meta-item-label">First Visit: </span>
//     <span class="table-meta-item-data">April 26</span>
//   </div>
// </div>
//
// Styleguide 7.1.1.

.tj-meta,
.table-meta {
    margin-top: ($spacer * 0.5);

    & + & {
        margin-top: 0;
    }

    .table-meta-item {
        font-size: $font-size-sm;
    }

    .table-meta-item-label {
        font-weight: 600;

        // "Disable" any links in labels.
        a {
            color: $grey-dark;
            pointer-events: none;
            cursor: default;
        }
    }

    .media-sm {
        display: inline-block;

        .media-left,
        .info {
            display: none;
        }
    }
}

// Checkbox Grid
//
// Styling for a checkbox grid, used for permission tables.
//
// Markup:
// <div class="table-wrap">
//   <table class="table-data js-checkbox-grid table-checkbox-grid">
//     <thead>
//       <tr>
//         <th>Reported Posts</th>
//         <td>Add</td>
//         <td>Announce</td>
//         <td>Close</td>
//         <td>Delete</td>
//         <td>Edit</td>
//         <td>Sink</td>
//         <td>View</td>
//       </tr>
//     </thead>
//     <tbody>
//       <tr>
//         <th>Comments</th>
//         <td><input type="checkbox" id="P1" name="Permission[]"></td>
//         <td><input type="checkbox" id="P2" name="Permission[]"></td>
//         <td><input type="checkbox" id="P3" name="Permission[]"></td>
//         <td><input type="checkbox" id="P4" name="Permission[]"></td>
//         <td><input type="checkbox" id="P5" name="Permission[]"></td>
//         <td><input type="checkbox" id="P6" name="Permission[]"></td>
//         <td><input type="checkbox" id="P7" name="Permission[]"></td>
//       </tr>
//       <tr>
//         <th>Discussions</th>
//         <td><input type="checkbox" id="P8" name="Permission[]"></td>
//         <td><input type="checkbox" id="P9" name="Permission[]"></td>
//         <td><input type="checkbox" id="P10" name="Permission[]"></td>
//         <td><input type="checkbox" id="P11" name="Permission[]"></td>
//         <td><input type="checkbox" id="P12" name="Permission[]"></td>
//         <td><input type="checkbox" id="P13" name="Permission[]"></td>
//         <td><input type="checkbox" id="P14" name="Permission[]"></td>
//       </tr>
//     </tbody>
//   </table>
// </div>
//
// Styleguide 7.2.

.table-checkbox-grid {
    table-layout: auto;

    .checkbox {
        margin-bottom: 0;
        margin-left: auto;
        margin-right: auto;
    }

    th {
        font-weight: $headings-font-weight;
    }

    a {
        color: $grey-dark;

        &:hover {
            color: $brand-primary;
        }
    }

    thead {
        // Permission column headings
        td {
            text-align: center;
            padding: $spacer * 0.5;
            border: 1px solid #eee;
            border-top: 1px solid #ddd;
            text-transform: uppercase;
            font-weight: 600;
            font-size: $font-size-sm;
            line-height: $line-height-lg;
            vertical-align: middle;
            width: 10%;

            &:last-child {
                border-right: 0;
            }
        }

        // Title cell
        th {
            font-weight: 700;
            max-width: 120px;
            min-width: 120px;
            @extend .truncate;
        }
    }

    tbody {
        td {
            padding: ($spacer * 0.5) ($grid-gutter-width * 0.5);
            text-align: center;
        }
    }

    @media screen and (max-width: 575px) {
        table-layout: fixed;

        thead,
        tbody {
            td,
            th {
                font-size: 12px;
                padding: 6px;
            }
        }

        tbody th {
            font-size: 13px;
        }

        thead {
            th {
                width: 100%;
            }

            // We gotta fit the column headings in somehow, so rotate them.
            td {
                position: relative;
                width: 36px;
                height: 90px;

                a {
                    position: relative;
                    display: block;
                    transform: rotate(90deg);
                    top: -24px;
                }
            }
        }
    }
}

// Summary Table
//
// Summary Table
//
// Markup:
// <div class="summaries js-dashboard-widgets-summaries">
//   <div class="table-summary-wrap ActiveUserSummary">
//     <div class="table-summary-title">Active Users</div>
//     <table class="table-summary">
//       <thead>
//         <tr>
//           <th>Name</th>
//           <th>Comments</th>
//         </tr>
//       </thead>
//       <tbody>
//         <tr>
//           <td>
//             <div class="media media-sm">
//               <div class="media-left">
//                 <div class="media-image-wrap">
//                   <a href="#">
//                     <img src="./public/resources/images/smart-puppy.jpg" />
//                   </a>
//                 </div>
//               </div>
//               <div class="media-body">
//                 <div class="media-title">
//                   <a href="#">jane_austen</a>
//                 </div>
//                 <div class="info">2:02PM</div>
//               </div>
//             </div>
//           </td>
//           <td>336</td>
//         </tr>
//         <tr>
//           <td>
//             <div class="media media-sm">
//               <div class="media-left">
//                 <div class="media-image-wrap">
//                   <a href="#">
//                     <img src="./public/resources/images/snow-dog.jpg" />
//                   </a>
//                 </div>
//               </div>
//               <div class="media-body">
//                 <div class="media-title">
//                   <a href="#">jackieO</a>
//                 </div>
//                 <div class="info">2:45PM</div>
//               </div>
//             </div>
//           </td>
//           <td>312</td>
//         </tr>
//       </tbody>
//     </table>
//   </div>
//   <div class="table-summary-wrap ActiveUserSummary">
//     <div class="table-summary-title">Popular Discussions</div>
//     <table class="table-summary">
//       <thead>
//         <tr>
//           <th>Discussion</th>
//           <th>Comments</th>
//           <th>Views</th>
//         </tr>
//       </thead>
//       <tbody>
//         <tr>
//           <td>
//             <div class="media media-sm">
//               <div class="media-body">
//                 <div class="media-title">
//                   <a href="#">Discussion Title</a>
//                 </div>
//                 <div class="info">May 26</div>
//               </div>
//             </div>
//           </td>
//           <td>42</td>
//           <td>145</td>
//         </tr>
//         <tr>
//           <td>
//             <div class="media media-sm">
//               <div class="media-body">
//                 <div class="media-title">
//                   <a href="#">Another Discussion</a>
//                 </div>
//                 <div class="info">June 8</div>
//               </div>
//             </div>
//           </td>
//           <td>67</td>
//           <td>312</td>
//         </tr>
//       </tbody>
//     </table>
//   </div>
// </div>
//
// Styleguide 7.3.

.summaries {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    > * {
        flex-grow: 1;
        max-width: 50%;
        padding: $spacer;

        @include media-breakpoint-down(md) {
            max-width: inherit;
            width: 100%;
            padding: $spacer 0;
        }
    }
}

.table-summary {
    @include fixed-table;

    th,
    td {
        @extend .table-data-cell;
        text-align: center;
        padding: $table-cell-padding 12px;

        &:first-child {
            text-align: left;
        }
    }

    tbody {
        @extend .table-data-body;
    }

    thead {
        th,
        td {
            width: 60%;
            padding: ($spacer * 0.5) 12px;
            text-transform: uppercase;
            font-weight: 600;
            font-size: $font-size-sm;
            line-height: $line-height-lg;
            border-bottom: $table-border-width solid #ddd;

            .table-summary-cell-main {
                width: 100%;
                min-width: 120px;
            }
        }
    }
}

.table-summary-title {
    font-size: 16px;
    font-weight: 600;
}

// This is for the moderation queue page to make the content responsive on mobile.
@media screen and (max-width: 600px) {
    .table-data .column-lg.username-cell-responsive {
        width: 150px;
    }
}

@media screen and (max-width: 350px) {
    .media-sm .media-image-wrap {
        display: none;
    }
    .table-data thead th.column-full {
        width: 40%;
    }
    .table-data .column-lg.username-cell-responsive {
        width: 40%;
    }
    .table-data thead th.column-checkbox {
        width: 20%;
    }
}
